<template>
    <div id="mini_speed"/>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import * as echarts from 'echarts';

const setEchartWH = reactive({ //设置控制图表大小变量
    width: '400px',
    height: '400px'
});

onMounted(()=> {
    setEchartWH.width = '230px';
    setEchartWH.height = '160px';
    draw(setEchartWH);
})
function draw(setEchartWH){

    var chartDom = document.getElementById('mini_speed');
    var myChart = echarts.init(chartDom,null,setEchartWH);
    var option;

    option = {
        series: [
            {
                type: 'gauge',
                progress: {
                    show: true,
                    width: 8                //标度圆环宽度
                },
                axisLine: {
                    lineStyle: {
                        width: 12            //指针中心背景远环的宽度
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {                //刻度
                    distance: 5,
                    length: 10,             //刻度线长度
                    lineStyle: {
                        width: 1,           //刻度线宽度
                        color: '#999'
                    }
                },
                axisLabel: {                //刻度标出来的数字
                    distance: 14,           //跟刻度圆环的距离
                    color: '#999',
                    fontSize: 8            //标度数字的字号
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 10,                       //刻度中心圆环的大小
                    itemStyle: {
                        borderWidth: 5             //刻度中心圆环的宽度
                    }
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 20,                       //数字的字号
                    offsetCenter: [0, '70%']            //数字显示的位置
                },
                data: [
                    {
                        value: 70
                    }
                ]
            }
        ]
    };

    option && myChart.setOption(option);

}
</script>

<style scoped>

</style>